實作 jQuery Event 系統

本文同時發布於好讀整理版

鐵人賽最後一篇，來一點比較特殊的實作，事件監聽系統。

平常就直接寫了，不知其原理，但其實我們也可以自己做出來。

先來看看題目吧！

題目：請用 JavaScript 製作出事件監聽系統(Event System)。

裡面必須包含 on , trigger, off 方法，請參考 jQuery 內的效果：

1. on : 註冊監聽處理程序(event handler)。
2. trigger : 觸發所有該監聽的調用(callback)方法。
3. off : 移除所有該監聽名稱的調用(callback)方法。

想法與實作

為了比較清楚解釋，作法寫在註解裡面。

class Events {
  // 初始化時給一個 key, value 的 js 物件 events
  constructor() {
    this.events = {}
  }

  // 註冊監聽事件處理器 on
  on(eventName, callback) {
    // 若有事件在 key 了，則繼續往後放入陣列
    if (this.events[eventName]) {
      this.events[eventName].push(callback)
    } else {
      // 若沒有，則初始新的 eventName 當作 key, callback 放入 value 裡面(陣列)。
      this.events[eventName] = [callback]
    }
  }

  // 觸發所有該名字(eventName)的事件,
  // 也就是上面 on 的 events 物件裡面的 key
  trigger(eventName) {
    if (this.events[eventName]) {
      for (let aCallback of this.events[eventName]) {
        aCallback()
      }
    }
  }

  // 移除所有某 eventName 的 callback
  off(eventName) {
    delete this.events[eventName]
    // this.events[eventName] = [] // 方法 2
  }
}

這樣就完成啦！

祝各位中秋佳節愉快～～

本文同時發布於好讀整理版